<template>
  <div class="mod-demo-ueditor" v-cloak>
    <el-card class="box-card">
      <el-form :inline="true">
        <el-form-item label="推送内容:">
          <el-input
            v-model="searchDataFrom.birthdayText"
            placeholder="请输入需要搜索的推送内容"
            style="width: 200px"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="创建人:">
          <el-input
            v-model="searchDataFrom.staffAccount"
            placeholder="请输入创建人"
            style="width: 200px"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getSearch">查询</el-button>
        </el-form-item>
        <div style="display: inline-block; float: right">
          <el-button
            type="success"
            icon="el-icon-circle-plus-outline"
            size="medium"
            @click="handleViewEdit()"
            >新增</el-button
          >
          <el-button
            @click="handleDelete()"
            type="danger"
            :disabled="dataListSelections.length <= 0"
            >批量删除</el-button
          >
        </div>
      </el-form>
    </el-card>
    <el-card class="box-card" style="margin-top: 10px">
      <el-table
        :data="dataCallList"
        style="width: 100%"
        class="ei_dialog"
        @selection-change="selectionChangeHandle"
      >
        <el-table-column type="selection" header-align="center" align="center">
        </el-table-column>
        <el-table-column type="index" label="序号" align="center" width="60">
        </el-table-column>
        <el-table-column
          prop="birthdayText"
          label="推送内容"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="staffAccount"
          label="创建人"
          header-align="center"
          align="center"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          header-align="center"
          align="center"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="createDept"
          label="地市"
          header-align="center"
          align="center"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="reson"
          label="备注"
          header-align="center"
          align="center"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="manufactorSystem"
          label="预览"
          header-align="center"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="handleYuLan(scope.row)"
              >预览</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          header-align="center"
          align="center"
          width="230"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleViewEdit(scope.row)"
              >编辑
            </el-button>
            <el-button
              type="danger"
              size="small"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </el-card>
    <!-- 新增 编辑弹框 -->
    <el-dialog
      :title="!dataForm.id ? '新增场景' : '修改场景'"
      :close-on-click-modal="false"
      :visible.sync="addorUpdateVisible"
      v-if="addorUpdateVisible"
      @close="addorUpdateVisible = false"
      width="60%"
    >
      <span slot="title" class="edit-form-apikey">{{
        !dataForm.id ? "新增信息" : "修改信息"
      }}</span>
      <el-form
        :model="dataForm"
        :rules="dataRule"
        ref="dataForm"
        @keyup.enter.native="dataFormSubmit()"
        label-width="100px"
        class="demo-apikeyForm"
      >
        <el-form-item label="推送内容:" prop="birthdayText">
          <el-input
            v-model="dataForm.birthdayText"
            type="textarea"
            :rows="4"
            placeholder="请输入"
            style="width: 42.825rem"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="地市部门:" prop="createDept">
          <el-select
            v-model="dataForm.createDept"
            placeholder="选择地市部门"
            clearable
            style="width: 19.125rem"
          >
            <el-option
              v-for="option in cityList"
              :key="option.cityId"
              :label="option.cityName"
              :value="option.cityName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注:" prop="reson">
          <el-input
            v-model="dataForm.reson"
            placeholder="请输入"
            style="width: 19.125rem"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="背景图片:" prop="">
          <el-upload
            ref="upload"
            :action="imgAction"
            list-type="picture-card"
            :file-list="fileList"
            name="images"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :limit="1"
            :on-exceed="handleExceed"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="背景音乐:" prop="">
          <div class="audioBox">
            <span style="color: rgb(102, 237, 242)">{{
              audioForm.voiceName
            }}</span>
            <!-- <span @click="handlePreview()">预览</span> -->
            <span class="audio">
              <audio
                ref="audioBg"
                :src="audioForm.voiceUrl"
                controls
              >
                <!-- 你的浏览器不支持 <code>audio</code> 标签. -->
              </audio>
            </span>
            <span
              style="
                color: rgb(138, 236, 8);
                display: inline-block;
                margin-left: 10px;
              "
            >
              <el-upload
                ref="replaceUploader"
                :file-list="fileListAudio"
                v-model="audioForm.voiceUrl"
                class="avatar-uploader"
                :action="actionAudio"
                :limit="10"
                :show-file-list="false"
                :on-success="handleReplaceAvatarSuccess"
                :on-progress="uploadVideoProcess"
                :beforeUpload="beforeAvatarUpload"
                :on-exceed="handleExceedAudio"
                :on-remove="handleRemoveAudio"
              >
                <!-- <el-col :span="6"> -->
                <el-button type="text" class="btnClick">编辑</el-button>
                <!-- </el-col> -->
                <!-- <el-col :span="18"> -->

                <!-- <i
                    v-else-if="audioForm.voiceUrl == '' && !audioFlag"
                    class="el-icon-plus avatar-uploader-icon"
                  ></i>  -->
                <!-- <el-progress
                  v-if="audioFlag == true"
                  type="line"
                  v-bind:percentage="audioUploadPercent"
                  style="margin-top: 7px"
                ></el-progress> -->
                <!-- </el-col> -->
              </el-upload>
            </span>
            
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" style="text-align: center !important; width: 100%">
        <el-button @click="dataResetForm('dataForm')">取消</el-button>
        <el-button
          type="primary"
          @click="dataFormSubmit('dataForm')"
          :loading="loading"
          >确定</el-button
        >
      </span>
      <!-- 收听原录音弹框 -->
      <div class="drag_boxs" v-if="dialogAudioShow">
        <h3>
          收听原录音
          <i class="el-icon-close close" @click="handleClose"></i>
        </h3>
        <audio
          id="audio"
          ref="audio"
          src
          controls
          controlsList="nodownload"
        ></audio>
      </div>
    </el-dialog>
    <!-- 上传的背景图片 -->
    <el-dialog :visible.sync="isUploadImgShow" width="20%">
      <img style="width: 100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
    <!-- 点击表格 - 预览 -->
    <el-dialog
      title="预览"
      :close-on-click-modal="false"
      :visible.sync="previewVisible"
      v-if="previewVisible"
      @close="previewVisible = false"
      width="20%"
    >
      <div>
        <img style="width: 100%" :src="previewFrom.filePath" alt="" srcset="" />
      </div>
      <div style="margin-top: 5px;text-align: center;">
        <audio
        style="height: 30px"
          id="audio"
          ref="audioYulan"
          :src='previewFrom.autioPath'
          controls
          controlsList="nodownload"
        ></audio>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      previewVisible: false, //点击表格 - 预览 显隐
      previewFrom: {}, //点击表格 - 预览 数据
      dialogAudioShow: false, //新增-编辑 - 录音显隐
      isUploadImgShow: false, //背景图片放大显隐
      dialogImageUrl: "", //点击背景图片放大，接受的图片地址
      imgAction: "", // 上传图片地址
      fileList: [], //上传的图片数据
      actionAudio: "", //音频地址
      fileListAudio: [], //音频数据
      audioForm: {
        voiceUrl: "",
        voiceName: "",
      },
      audioFlag: false,
      dataCallList: [], //初始化数据
      searchDataFrom: {
        birthdayText: "", // 生日内容模板
        staffAccount: "", // 创建人
        departmentType: "", //部门
      },
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListSelections: [], //多选
      addorUpdateVisible: false,
      cityList: [], //地市数据
      dataForm: {
        id: 0,
        modelName: "",
        birthdayText:
          "{btdhkName}，在{btdhkDay}这个特别的日子里，分公司管理层代表分公司全体员工给您送上生日最最真挚的祝福，祝您生日快乐、家庭幸福！企业的发展倾注了您和您家人的支持、奉献，感谢您的辛勤工作，在此向您表示衷心感谢！愿我们在今后的工作中和谐、同心，让企业与您共创美好的明天。", //推送内容
        createDept: "", //地市
        reson: "", //备注
      },
      scopeZeroList: [], //部门数据
      scopeOneList: [], //提醒区域范围数据
      dataRule: {
        birthdayText: [
          {
            required: true,
            message: "推送内容不能为空",
            trigger: "blur",
          },
        ],
        createDept: [
          {
            required: true,
            message: "地市不能为空",
            trigger: "change",
          },
        ],
        reson: [
          {
            required: true,
            message: "请输入备注",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    // this.getDataList()
    this.imgAction = this.$http.adornUrl(
      `cpcpdu/uploadImg?token=${this.$cookie.get("token")}`
    );
    this.actionAudio = this.$http.adornUrl(
      `CpcpDuBirthday/uploadFile?token=${this.$cookie.get("token")}`
    );
  },
  //修改颜色
  computed: {
    staffAccount: {
      get() {
        return this.$store.state.user.staffAccount;
      },
      set(val) {
        this.$store.commit("user/updateStaffAccount", val);
      },
    },
    setIconStyle() {
      return function (reviewedStatus) {
        console.log("reviewedStatus===", reviewedStatus);
        // return index === 1 ? "color: rgb(64,158,255)" : "color: rgb(230,162,60)";
        let str = "";
        switch (reviewedStatus) {
          case "未审核":
            str = "color: rgb(245,108,108)";
            break;
          case 4:
            str = "color: rgb(64,158,255)";
            break;
          case "未提交":
            str = "color: rgb(230,162,60)";
            break;
          case "已通过":
            str = "color: rgb(103,194,58)";
            break;
          default:
            str = "color: rgb(64,158,255)";
        }
        return str;
      };
    },
  },
  mounted() {},
  activated() {
    this.getDataList();
    this.getCityList();
  },
  watch: {
    dialogAudioShow(newVal, oldVal) {
      if (newVal === false) {
        let audio = this.$refs.audio;
        audio.pause(); //如关闭 暂停录音
      }
    },
    //点击表格预览弹框消失，暂停播放音频
    previewVisible(newVal, oldVal) {
      if (newVal === false) {
        console.log("2222");
        let audio = this.$refs.audioYulan;
        audio.pause(); //如关闭 暂停录音
      }
    },
    //新增 - 编辑弹框消失，暂停播放音频
    addorUpdateVisible(newVal, oldVal) {
      if (newVal === false) {
        console.log("3333");
        let audio = this.$refs.audioBg;
        audio.pause(); //如关闭 暂停录音
      }
    },
  },
  methods: {
    // 获取地市数据
    getCityList() {
      this.$http({
        url: this.$http.adornUrl("/syscitydata/cityList"),
        method: "get",
        params: this.$http.adornParams({}),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log("city", data);
          this.cityList = data.list;
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    //获取列表数据
    getDataList() {
      this.$http({
        url: this.$http.adornUrl("/CpcpDuBirthday/selectBirthday"),
        method: "get",
        params: this.$http.adornParams({
          pageNum: this.pageIndex,
          pageSize: this.pageSize,
          birthdayText: this.searchDataFrom.birthdayText,
          staffAccount: this.searchDataFrom.staffAccount,
        }),
      }).then((res) => {
        console.log(res, "resresres");
        if (res && res.data.code === 0) {
          this.dataCallList = res.data.data.records;
          this.totalPage = res.data.data.total;
        } else {
          this.$message.error(res.data.msg);
          this.dataCallList = [];
          this.totalPage = 0;
        }
        // console.log(this.dataCallList);
        // console.log(this.totalPage);
      });
    },
    //查询
    getSearch() {
      this.pageIndex = 1;
      this.getDataList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
      console.log(this.dataListSelections);
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    sizeChangeHandleC() {
      this.pageSizeC = val;
      this.pageIndexC = 1;
      this.getPerson(this.series);
    },
    currentChangeHandleC(val) {
      this.pageIndexC = val;
      this.getPerson(this.series);
    },
    // 新增和修改
    handleViewEdit(data) {
      console.log(data);
      this.addorUpdateVisible = true;
      this.dataForm.id = data || 0;
      if (this.dataForm.id === 0) {
        console.log("新增");
        // this.dataForm.birthdayText = "";
        this.dataForm.createDept = "";
        this.dataForm.reson = "";
        this.fileList = [];
        this.getAudio();
      } else {
        console.log("编辑");
        //修改
        let obj = JSON.parse(JSON.stringify(data)); //深拷贝,拷贝的是对象
        this.dataForm.id = obj.id;
        this.dataForm.birthdayText = obj.birthdayText; //推送内容
        this.dataForm.createDept = obj.createDept; //地市
        // this.fileList = obj.filePath;
        this.fileList = [];
        let objFile = {};
        objFile.url = obj.filePath;
        this.fileList.push(objFile);
        console.log("this.fileList=", this.fileList);
        this.dataForm.reson = obj.reson; //备注
        this.audioForm.voiceUrl = obj.autioPath; //新增时候获取默认音频地址
        this.audioForm.voiceName = obj.autioName//新增时候获取默认音频名字
      }
    },
    //获取初始化的音频名字和地址
    getAudio() {
      this.$http({
        url: this.$http.adornUrl("/CpcpDuBirthday/selectImgAutio"),
        method: "get",
        params: this.$http.adornParams({}),
      }).then((res) => {
        if (res && res.data.code === 0) {
          console.log(res, "resresres");
          this.audioForm.voiceUrl = res.data.data.autioPath; //新增时候获取默认音频地址
          this.audioForm.voiceName = res.data.data.autioName; //新增时候获取默认音频名字
          this.audioFlag = true;
          console.log("this.audioForm==",this.audioForm);
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    handleExceed(file) {
      this.$message.error("最多上传1张图片,如需更改图片，请先删除上传的照片");
    },
    handleSuccess(response, file, fileListFile) {
      console.log("response", response);
      console.log("wwwwwwwwwwwwwwww", file);
      console.log("fileListFile", fileListFile);
      if (response.code == 500) {
        this.$message.error(response.msg);
        this.$refs.upload.clearFiles(); //清除上传的附件，不显示在列表（）
        let index = 0;
        for (const i in fileListFile) {
          if (fileListFile[i] == file) {
            index = i;
            break;
          }
        }
        // 移出当前文件对象
        fileListFile.splice(index, 1);
      } else {
        this.$message.success("背景图片上传成功");
        let obj = {};
        obj.url = response.data;
        this.fileList.push(obj);
        console.log("this.fileList=", this.fileList);
      }
    },
    handleRemove(file, fileList) {
      console.log("file===", file);
      console.log("file===", fileList);
      let ss = file.url;
      let index = ss.lastIndexOf("/");
      let result = ss.substr(index + 1, ss.length);
      this.fileList = fileList.slice(-3);
      console.log("resultresultresult===", result);
      console.log("file===77777777777777777777", fileList);
    },
    handlePictureCardPreview(file) {
      console.log("file==", file);
      this.isUploadImgShow = true;
      this.dialogImageUrl = file.url;
    },
    // 表单提交
    dataFormSubmit(dataForm) {
      console.log(this.dataForm);
      this.$refs[dataForm].validate((valid) => {
        if (valid) {
          console.log("this.fileList", this.fileList);
          console.log("this.fileList", this.fileList.length);
          if (this.fileList.length == 0) {
            this.$message.error("请上传背景图");
            return;
          }
          // return;
          this.loading = true;
          this.$http({
            url: this.$http.adornUrl(
              `/CpcpDuBirthday/${
                !this.dataForm.id ? "insert" : "updateBirthDay"
              }`
            ),
            method: "post",
            data: this.$http.adornData({
              id: this.dataForm.id || undefined,
              birthdayText: this.dataForm.birthdayText, //推送内容
              createDept: this.dataForm.createDept, //地市
              reson: this.dataForm.reson, //备注
              filePath: this.fileList[0].url, //照片地址
              autioPath:this.audioForm.voiceUrl,//音频地址
              autioName:this.audioForm.voiceName,//音频名字
              staffAccount: this.staffAccount, //当前登录人
            }),
          }).then(({ data }) => {
            console.log(data, "data");
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.addorUpdateVisible = false;
                  this.getDataList();
                  this.loading = false;
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    dataResetForm(dataForm) {
      this.addorUpdateVisible = false;
      this.$refs[dataForm].resetFields();
    },
    //显示状态
    getState(item) {
      let str = "";
      if (item.state == 1) {
        str = "开启";
      } else {
        str = "关闭";
      }
      return str;
    },
    //删除和批量删除
    handleDelete(id) {
      console.log(id);
      var ids = id
        ? [id]
        : this.dataListSelections.map((item) => {
            //循环点击的对象，拿到每个对象的id
            return item.id;
          });
      this.$confirm(
        `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/CpcpDuBirthday/deleteBirthDay"),
            method: "post",
            data: this.$http.adornData(ids, false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getDataList();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    // 音频上传成功
    handleReplaceAvatarSuccess(res, file, fileList) {
      this.fileListAudio = [];
      console.log("res=", res);
      console.log("file=", file);
      console.log("fileList=", fileList);
      this.fileListAudio = [...fileList];
      console.log("this.fileListAudio==", this.fileListAudio);
      this.audioFlag = false;
      this.audioUploadPercent = 0;
      if (res.code == 0) {
        this.$message.success("音频上传成功");
        // this.audioForm.voiceUrl = process.env.VUE_APP_BASE_API + res.data;
        // this.audioForm.voiceUrl = res.data;
        // this.audioForm.voiceName = fileList[0].name;
        this.audioForm.voiceUrl = file.response.data;
        this.audioForm.voiceName = file.name;
        console.log("this.audioForm=", this.audioForm);
      } else {
        this.$message.error("音频上传失败，请重新上传！");
        this.$refs.replaceUploader.clearFiles(); //清除上传的附件，不显示在列表（）
        let index = 0;
        for (const i in fileList) {
          if (fileList[i] == file) {
            index = i;
            break;
          }
        }
        // 移出当前文件对象
        fileList.splice(index, 1);
      }
    },
    //进度条
    uploadVideoProcess(event, file, fileList) {
      this.audioFlag = true;
      this.audioUploadPercent = file.percentage.toFixed(0) * 1;
    },
    handleExceedAudio(file) {
      this.$message.error("最多上传10个音频,如需更改音频，请先删除上传的音频");
    },
    /**上传文件限制--只能上传mp3格式的文件 */
    beforeAvatarUpload(file) {
      const isLt10M = file.size / 1024 / 1024 < 50;
      if (["audio/mp3", "audio/mpeg"].indexOf(file.type) == -1) {
        this.$message.error("请上传正确的音频格式");
        return false;
      }
      if (!isLt10M) {
        this.$message.error("上传音频大小不能超过50MB哦!");
        return false;
      }
    },
    handleRemoveAudio(file, fileList) {
      console.log("file===", file);
      console.log("file===", fileList);
      let ss = file.url;
      let index = ss.lastIndexOf("/");
      let result = ss.substr(index + 1, ss.length);
      this.fileList = fileList.slice(-3);
      console.log("resultresultresult===", result);
      console.log("file===77777777777777777777", fileList);
    },
    //新增 - 编辑 预览录音
    handlePreview() {
      this.dialogAudioShow = true;
    },
    // 关闭弹框
    handleClose() {
      this.dialogAudioShow = false;
      let audio = this.$refs.audio;
      audio.pause(); //如关闭 暂停录音
    },
    //表格 - 点击预览
    handleYuLan(row) {
      console.log("row==", row);
      if (row) {
        this.previewFrom = row;
        this.previewVisible = true;
      }
    },
  },
};
</script>

<style scoped>
[v-cloak] {
  display: none;
}
.edit-form {
  width: 50%;
  margin: 0 auto;
}
.enableno {
  color: rgb(240, 15, 15);
}
.enableyes {
  color: rgb(67, 240, 15);
}
.formlist {
  width: 50%;
}
.el_icon_search {
  /* background-color: red; */
  border: 1px solid blue;
  background-color: white;
  color: blue;
}
.el_icon_search:hover {
  background-color: rgb(244, 248, 255);
}
.el-textarea__inner {
  height: 200px;
  overflow-y: auto;
  /* overflow-y: auto;兼容ie  */
}
.ei_dialog /deep/ .titlered {
  color: red !important;
}
/* css */
.button_color .el-button--button_tow {
  background-color: rgb(4, 42, 117) !important;
  border-color: rgb(47, 103, 205) !important;
  color: rgb(70, 130, 241);
}
/* /移入时按钮样式type='button_tow' */
.button_color .el-button--button_tow:hover {
  background: rgb(4, 42, 117) !important;
  border-color: rgb(47, 103, 205) !important;
  color: rgb(70, 130, 241);
  /* opacity: 0.8; */
}
.f-box-calss {
  position: relative;
}
.f-box-calss-d {
  position: absolute;
  top: 20px;
  left: -116px;
  color: rgba(255, 255, 0, 0.8);
  font-size: 12px !important;
}
.demo-apikeyForm /deep/ .el-form-item--medium .el-form-item__content,
.el-form-item--medium .el-form-item__label {
  margin-left: 20px;
}
.edit-form-apikey {
  font-size: 18px;
  color: #fff;
}
.edit-form-apikey::after {
  content: "";
  width: 5px;
  height: 30px;
  position: absolute;
  top: 13px;
  left: 8px;
  border-radius: 50px;
  background: rgb(0, 102, 239);
}
/* 录音样式 */
.drag_boxs {
  width: 600px;
  height: 120px;
  border: 1px solid rgb(13, 45, 105);
  background: rgb(6, 19, 44);
  z-index: 1000;
  /* position: fixed; */
  position: absolute;
  top: 28.5%;
  left: 38%;
  /* top: 300px; */
  /* right: 20px; */
  cursor: pointer;
  text-align: center;
}
.drag_boxs h3 {
  text-align: center;
}
.drag_boxs .close {
  float: right;
  /* margin: 10px 30px 0 0; */
  margin-right: 30px;
  font-size: 20px;
  cursor: pointer;
}
.drag_boxs #audio {
  width: 80%;
  height: 2.5rem;
}
.audioBox {
  cursor: pointer;
  display: flex;
  align-items: center;
}
.audioBox .audio,
.audioBox audio {
  height: 30px;
  margin-left: 10px;
}
</style>
<style>
.demo-apikeyForm /deep/ .el-dialog__footer {
  text-align: center !important;
}
</style>

